<template>
    <div id="workshopproductionanalysis_main" class="echarsBox"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: "workshopproductionanalysis",
    data() {
        return {};
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            let chartDom = document.getElementById("workshopproductionanalysis_main");
            let myChart = echarts.init(chartDom);
            let option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}'
                },
                title: {
                    subtext: '单位:个',
                    left: 50,
                    subtextStyle: {
                        color: '#fff'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['焊装一线', '焊装二线', '焊装三线', '焊装四线', '焊装五线'],
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    min: 0,
                    max: 250,
                    interval: 50,
                    axisLine: {
                        //这是y轴文字颜色
                        lineStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    splitLine: {
                        //分割线配置
                        show: true,
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0,93,163, 1)",
                                    }
                                ],
                                global: false,
                            },
                        },
                    },

                },
                {
                    type: 'value',
                    min: 0,
                    max: 25,
                    interval: 5,
                    axisLine: {
                        //这是y轴文字颜色
                        lineStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    },
                    splitLine: {
                        //分割线配置
                        show: true,
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0,93,163, 1)",
                                    }
                                ],
                                global: false,
                            },
                        },
                    },
                }
                ],
                legend: {
                    data: ['现计划', '现完成', '可动率', '日计划'],
                    icon: 'circle',
                    textStyle: {
                        color: "#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true
                },
                series: [
                    {
                        name: '现计划',
                        data: [120, 200, 150, 80, 70],
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(50,197,255,1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(50,197,255,0)'
                                    }
                                ])
                            }
                        }
                    },
                    {
                        name: '现完成',
                        data: [120, 200, 150, 80, 70],
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(68,215,182,1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(68,215,182,0)'
                                    }
                                ])
                            }
                        }
                    },
                    {
                        name: '可动率',
                        data: [120, 200, 150, 80, 70],
                        type: 'bar',
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(1,101,255,1)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(1,101,255,0)'
                                    }
                                ])
                            }
                        }
                    },
                    {
                        name: '日计划',
                        data: [120, 200, 150, 80, 70],
                        type: 'line',
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: '#fff'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
            window.addEventListener('resize', myChart.resize);
        },
    },
};
</script>
<style  scoped>
.echarsBox {
    width: 100%;
    height: calc(100% - 41.5px);
    overflow: hidden;
}
</style>
            